<template>
  <div style="width: 500px; margin-left: 30%; margin-top: 5%">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名" style="margin-top: 10px">
        <el-input v-model="form.realname"></el-input>
      </el-form-item>
      <el-form-item label="投资金额" style="margin-top: 50px">
        <el-input v-model="form.investment"></el-input>
      </el-form-item>
      <el-form-item label="银行卡号" style="margin-top: 50px;margin-bottom:50px">
        <el-input v-model="form.account"></el-input>
      </el-form-item>
      <div class="demo-type">
        <el-form-item label="头像">
          <el-avatar shape="circle" :size="100">
            <img :src="aaa" alt="图片不存在" />
          </el-avatar>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://localhost:8000/file-serv/upload"
            name="files"
            :on-success="handleSuccess"
            :file-list="fileList"
            :auto-upload="true"
            :headers="headrs"
          >
            <el-button type="primary" size="small"
              >图片上传<i class="el-icon-upload el-icon--right"></i
            ></el-button>
          </el-upload>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getAllInfo, saveShareholder } from "@/api/shareholderInfo.js";
export default {
  data() {
    return {
      form: {},
      fileList: [],
      headrs: {
        token: sessionStorage.getItem("token"),
      },
      aaa:""
    };
  },
  methods: {
    loadForm() {
      getAllInfo().then((res) => {
        if (res.data.code == 200) {
          this.form = res.data.data;
          this.aaa = this.form.headImage
        }
      });
    },
    submitForm() {
      this.form.headImage = this.aaa;
      saveShareholder(this.form).then((res) => {
        if (res.data.code == 200) {
          this.form = res.data.data;
          this.$message.success("修改信息成功!");
          this.loadForm();
        }
      });
    },
    handleSuccess(data) {
      //立刻向el-upload的action属性指定的路径发起请求，并且携带指定的请求头
       this.aaa=data;
       console.log(data);
    },
  },
  mounted() {
    this.loadForm();
  },
};
</script>